Vérifications des propriétés en excès de TypeScript : Renforcer la sécurité de vos types d'objets

            
interface User {
  name: string;
  age: number;
}

const newUser: User = {
  name: 'Alice',
  age: 30,
  email: 'alice@example.com' // Erreur : Le littéral d'objet ne peut spécifier que des propriétés connues, et 'email' n'existe pas dans le type 'User'.
};

            

              
                Copy
              
            
          

            
interface Product {
  id: number;
  name: string;
}

function displayProduct(product: Product): void {
  console.log(`Product ID: ${product.id}, Name: ${product.name}`);
}

displayProduct({
  id: 101,
  name: 'Laptop',
  price: 1200 // Erreur : L'argument de type '{ id: number; name: string; price: number; }' n'est pas assignable au paramètre de type 'Product'.
             // Le littéral d'objet ne peut spécifier que des propriétés connues, et 'price' n'existe pas dans le type 'Product'.
});

            

              
                Copy
              
            
          

            
interface Config {
  timeout: number;
}

function setupConfig(config: Config) {
  console.log(`Timeout set to: ${config.timeout}`);
}

const userProvidedConfig = {
  timeout: 5000,
  retries: 3 // Cette propriété 'retries' est une propriété en excès selon 'Config'
};

setupConfig(userProvidedConfig); // Pas d'erreur !

// Même si userProvidedConfig a une propriété supplémentaire, la vérification est ignorée
// car ce n'est pas un littéral d'objet qui est directement passé.
// TypeScript vérifie le type de userProvidedConfig lui-même.
// Si userProvidedConfig était déclaré avec le type Config, une erreur se produirait plus tôt.
// Cependant, s'il est déclaré comme 'any' ou un type plus large, l'erreur est différée.

// Une manière plus précise de montrer le contournement :
let anotherConfig;

if (Math.random() > 0.5) {
  anotherConfig = {
    timeout: 1000,
    host: 'localhost' // Propriété en excès
  };
} else {
  anotherConfig = {
    timeout: 2000,
    port: 8080 // Propriété en excès
  };
}

setupConfig(anotherConfig as Config); // Pas d'erreur en raison de l'assertion de type et du contournement

// La clé est que 'anotherConfig' n'est pas un littéral d'objet au moment de l'assignation à setupConfig.
// Si nous avions une variable intermédiaire typée comme 'Config', l'assignation initiale échouerait.

// Exemple de variable intermédiaire :
let intermediateConfig: Config;

intermediateConfig = {
  timeout: 3000,
  logging: true // Erreur : Le littéral d'objet ne peut spécifier que des propriétés connues, et 'logging' n'existe pas dans le type 'Config'.
};

            

              
                Copy
              
            
          

            
interface Settings {
  theme: 'dark' | 'light';
}

const mySettings = {
  theme: 'dark',
  fontSize: 14 // Propriété en excès
} as Settings;

// Pas d'erreur ici à cause de l'assertion de type.
// Nous disons à TypeScript : "Fais-moi confiance, cet objet est conforme à Settings."
console.log(mySettings.theme);
// console.log(mySettings.fontSize); // Cela provoquerait une erreur d'exécution si fontSize n'était pas réellement là.

            

              
                Copy
              
            
          

            
interface FlexibleObject {
  id: number;
  [key: string]: any; // Autorise toute clé de type chaîne avec n'importe quelle valeur
}

const flexibleItem: FlexibleObject = {
  id: 1,
  name: 'Widget',
  version: '1.0.0'
};

// Pas d'erreur car 'name' et 'version' sont autorisés par la signature d'index.
console.log(flexibleItem.name);

            

              
                Copy
              
            
          

            
interface BaseConfig {
  host: string;
}

interface ExtendedConfig extends BaseConfig {
  port: number;
}

const defaultConfig: BaseConfig = {
  host: 'localhost'
};

const userConfig = {
  port: 8080,
  timeout: 5000 // Propriété en excès par rapport à BaseConfig, mais attendue par le type fusionné
};

// Décomposition dans un nouveau littéral d'objet conforme à ExtendedConfig
const finalConfig: ExtendedConfig = {
  ...defaultConfig,
  ...userConfig
};

// C'est généralement acceptable car 'finalConfig' est déclaré comme 'ExtendedConfig'
// et les propriétés correspondent. La vérification porte sur le type de 'finalConfig'.

// Considérons un scénario où cela échouerait :

interface SmallConfig {
  key: string;
}

const data1 = { key: 'abc', value: 123 }; // 'value' est en trop ici
const data2 = { key: 'xyz', status: 'active' }; // 'status' est en trop ici

// Tentative d'assignation à un type qui n'accepte pas les extras

// const combined: SmallConfig = {
//   ...data1, // Erreur : Le littéral d'objet ne peut spécifier que des propriétés connues, et 'value' n'existe pas dans le type 'SmallConfig'.
//   ...data2  // Erreur : Le littéral d'objet ne peut spécifier que des propriétés connues, et 'status' n'existe pas dans le type 'SmallConfig'.
// };

// L'erreur se produit parce que le littéral d'objet formé par la syntaxe de décomposition
// contient des propriétés ('value', 'status') non présentes dans 'SmallConfig'.

// Si nous créons une variable intermédiaire avec un type plus large :

const temp: any = {
  ...data1,
  ...data2
};

// Ensuite, en assignant à SmallConfig, la vérification des propriétés en excès est contournée lors de la création du littéral initial,
// mais la vérification de type lors de l'assignation pourrait toujours se produire si le type de temp est inféré plus strictement.
// Cependant, si temp est 'any', aucune vérification ne se produit jusqu'à l'assignation à 'combined'.

// Affinons la compréhension de la décomposition avec les vérifications de propriétés en excès :
// La vérification a lieu lorsque le littéral d'objet créé par la syntaxe de décomposition est assigné
// à une variable ou passé à une fonction qui attend un type plus spécifique.

interface SpecificShape { 
  id: number;
}

const objA = { id: 1, extra1: 'hello' };
const objB = { id: 2, extra2: 'world' };

// Cela échouera si SpecificShape n'autorise pas 'extra1' ou 'extra2' :
// const merged: SpecificShape = {
//   ...objA,
//   ...objB
// };

// La raison de l'échec est que la syntaxe de décomposition crée effectivement un nouveau littéral d'objet.
// Si objA et objB avaient des clés qui se chevauchaient, la dernière l'emporterait. Le compilateur
// voit ce littéral résultant et le vérifie par rapport à 'SpecificShape'.

// Pour que cela fonctionne, vous pourriez avoir besoin d'une étape intermédiaire ou d'un type plus permissif :

const tempObj = {
  ...objA,
  ...objB
};

// Maintenant, si tempObj a des propriétés qui ne sont pas dans SpecificShape, l'assignation échouera :
// const mergedCorrected: SpecificShape = tempObj; // Erreur : Le littéral d'objet ne peut spécifier que des propriétés connues...

// La clé est que le compilateur analyse la forme du littéral d'objet en cours de formation.
// Si ce littéral contient des propriétés non définies dans le type cible, c'est une erreur.

// Le cas d'utilisation typique de la syntaxe de décomposition avec les vérifications de propriétés en excès :

interface UserProfile {
  userId: string;
  username: string;
}

interface AdminProfile extends UserProfile {
  adminLevel: number;
}

const baseUserData: UserProfile = {
  userId: 'user-123',
  username: 'coder'
};

const adminData = {
  adminLevel: 5,
  lastLogin: '2023-10-27'
};

// C'est ici que la vérification des propriétés en excès est pertinente :
// const adminProfile: AdminProfile = {
//   ...baseUserData,
//   ...adminData // Erreur : Le littéral d'objet ne peut spécifier que des propriétés connues, et 'lastLogin' n'existe pas dans le type 'AdminProfile'.
// };

// Le littéral d'objet créé par la décomposition a 'lastLogin', qui n'est pas dans 'AdminProfile'.
// Pour corriger cela, 'adminData' devrait idéalement être conforme à AdminProfile ou la propriété en excès devrait être gérée.

// Approche corrigée :
const validAdminData = {
  adminLevel: 5
};

const adminProfileCorrect: AdminProfile = {
  ...baseUserData,
  ...validAdminData
};

console.log(adminProfileCorrect.userId);
console.log(adminProfileCorrect.adminLevel);

            

              
                Copy
              
            
          

            
interface UserProfile {
  id: number;
  name: string;
}

interface UserWithMetadata extends UserProfile {
  metadata: {
    [key: string]: any;
  };
}

// Ou plus couramment avec un alias de type et la syntaxe rest :
type UserProfileWithMetadata = UserProfile & {
  [key: string]: any;
};

const user1: UserProfileWithMetadata = {
  id: 1,
  name: 'Bob',
  email: 'bob@example.com',
  isAdmin: true
};

// Pas d'erreur, car 'email' et 'isAdmin' sont capturés par la signature d'index dans UserProfileWithMetadata.
console.log(user1.email);
console.log(user1.isAdmin);

// Une autre manière en utilisant les paramètres rest dans une définition de type :
interface ConfigWithRest {
  apiUrl: string;
  timeout?: number;
  // Capture toutes les autres propriétés dans 'extraConfig'
  [key: string]: any;
}

const appConfig: ConfigWithRest = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  featureFlags: {
    newUI: true,
    betaFeatures: false
  }
};

console.log(appConfig.featureFlags);

            

              
                Copy
              
            
          

            
interface Employee {
  employeeId: string;
  department: string;
}

function processEmployeeData(data: Employee & { [key: string]: any }) {
  const { employeeId, department, ...otherDetails } = data;

  console.log(`Employee ID: ${employeeId}`);
  console.log(`Department: ${department}`);
  console.log('Other details:', otherDetails);
  // otherDetails contiendra toutes les propriétés non explicitement déstructurées,
  // comme 'salary', 'startDate', etc.
}

const employeeInfo = {
  employeeId: 'emp-789',
  department: 'Engineering',
  salary: 90000,
  startDate: '2022-01-15'
};

processEmployeeData(employeeInfo);

// Même si employeeInfo avait une propriété supplémentaire au départ, la vérification des propriétés en excès
// est contournée si la signature de la fonction l'accepte (par exemple, en utilisant une signature d'index).
// Si processEmployeeData était typé strictement comme 'Employee', et que employeeInfo avait 'salary',
// une erreur se produirait SI employeeInfo était un littéral d'objet passé directement.
// Mais ici, employeeInfo est une variable, et le type de la fonction gère les extras.

            

              
                Copy
              
            
          

            
interface UserProfile {
  id: number;
  name: string;
  email?: string; // email optionnel
}

const userWithEmail: UserProfile = {
  id: 2,
  name: 'Charlie',
  email: 'charlie@example.com'
};

const userWithoutEmail: UserProfile = {
  id: 3,
  name: 'David'
};

// Si nous essayons d'ajouter une propriété non présente dans UserProfile :
// const userWithExtra: UserProfile = {
//   id: 4,
//   name: 'Eve',
//   phoneNumber: '555-1234'
// }; // Erreur : Le littéral d'objet ne peut spécifier que des propriétés connues, et 'phoneNumber' n'existe pas dans le type 'UserProfile'.

            

              
                Copy
              
            
          

            
interface ProductConfig {
  id: string;
  version: string;
}

// Imaginez que cela vienne d'une source externe ou d'un module moins strict
const externalConfig = {
  id: 'prod-abc',
  version: '1.2',
  debugMode: true // Propriété en excès
};

// Si vous savez que 'externalConfig' aura toujours 'id' et 'version' et que vous voulez le traiter comme ProductConfig :
const productConfig = externalConfig as ProductConfig;

// Cette assertion contourne la vérification des propriétés en excès sur `externalConfig` lui-même.
// Cependant, si vous passiez un littéral d'objet directement :

// const productConfigLiteral: ProductConfig = {
//   id: 'prod-xyz',
//   version: '2.0',
//   debugMode: false
// }; // Erreur : Le littéral d'objet ne peut spécifier que des propriétés connues, et 'debugMode' n'existe pas dans le type 'ProductConfig'.

            

              
                Copy
              
            
          

            
interface Shape {
  kind: 'circle' | 'square';
}

interface Circle extends Shape {
  kind: 'circle';
  radius: number;
}

interface Square extends Shape {
  kind: 'square';
  sideLength: number;
}

function calculateArea(shape: Shape) {
  if (shape.kind === 'circle') {
    // TypeScript sait que 'shape' est un Circle ici
    console.log(Math.PI * shape.radius ** 2);
  } else if (shape.kind === 'square') {
    // TypeScript sait que 'shape' est un Square ici
    console.log(shape.sideLength ** 2);
  }
}

const circleData = {
  kind: 'circle' as const, // Utilisation de 'as const' pour l'inférence de type littéral
  radius: 10,
  color: 'red' // Propriété en excès
};

// Lorsqu'il est passé à calculateArea, la signature de la fonction attend 'Shape'.
// La fonction elle-même accédera correctement à 'kind'.
// Si calculateArea attendait 'Circle' directement et recevait circleData
// en tant que littéral d'objet, 'color' serait un problème.

// Illustrons la vérification des propriétés en excès avec une fonction attendant un sous-type spécifique :

function processCircle(circle: Circle) {
  console.log(`Processing circle with radius: ${circle.radius}`);
}

// processCircle(circleData); // Erreur : L'argument de type '{ kind: "circle"; radius: number; color: string; }' n'est pas assignable au paramètre de type 'Circle'.
                         // Le littéral d'objet ne peut spécifier que des propriétés connues, et 'color' n'existe pas dans le type 'Circle'.

// Pour corriger cela, vous pouvez déstructurer ou utiliser un type plus permissif pour circleData :

const { color, ...circleDataWithoutColor } = circleData;
processCircle(circleDataWithoutColor);

// Ou définir circleData pour inclure un type plus large :

const circleDataWithExtras: Circle & { [key: string]: any } = {
  kind: 'circle',
  radius: 15,
  color: 'blue'
};
processCircle(circleDataWithExtras); // Maintenant, ça fonctionne.

            

              
                Copy